<template>
  <div id="git-provider">
    <div style="width: 100%;margin: 0 auto;">
      <h3>Git凭证</h3>
      <el-button
        icon="el-icon-circle-plus-outline"
        type="text"
        size="mini"
        style="float: right; margin-top: -30px;margin-right: 10px;"
        @click="addOp()"
      >新增
      </el-button>
    </div>
    <el-table
      ref="gitProviderTblRef"
      :data="tblData"
      border
      style="width: 100%;"
      max-height="600"
      cell-class-name="cellClass"
      header-cell-class-name="headerClass"
    >
      <el-table-column
        v-for="item in tblHeader"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <div v-if="item.isOp">
            <el-button type="text" size="small" @click="editOp(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteOp(scope.row)">删除</el-button>
          </div>
          <span v-else-if="item.isPass">{{ '********' }}</span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-draggable
      :title="dgTitle"
      :visible.sync="dgVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <GitProviderEdit
        :git-provider-info="gitProviderInfo"
        :edit-type="editType"
        @cancel-edit="cancelEdit"
        @submit-edit="submitEdit"
      /></el-dialog>
  </div>
</template>

<script>
import { getGitProviderList, updateGitProvider } from '@/api/gitProvider'
import GitProviderEdit from '@/views/systemSetting/usermanagement/gitprovider/GitProviderEdit.vue'

export default {
  name: 'GitProvider',
  components: { GitProviderEdit },
  data() {
    return {
      tblHeader: [{
        prop: 'username',
        label: 'Git账号'
      }, {
        prop: 'password',
        label: '密码',
        isPass: true
      }, {
        prop: 'isDefaultStr',
        label: '是否默认使用'
      }, {
        prop: 'isGlobalStr',
        label: '是否全局使用'
      }, {
        prop: 'groupId',
        label: '组织ID'
      }, {
        prop: 'createTime',
        label: '创建时间'
      }, {
        prop: 'operation',
        label: '操作',
        isOp: true
      }],
      tblData: [],
      gitProviderInfo: {},
      editType: 'edit',
      dgTitle: '编辑Git凭证',
      dgVisible: false
    }
  },
  mounted() {
    this.initTblData()
  },
  methods: {
    initTblData() {
      getGitProviderList().then(res => {
        this.tblData = res.data
        this.tblData.forEach(item => {
          item['isDefaultStr'] = item.isDefault === 1 ? '是' : '否'
          item['isGlobalStr'] = item.isGlobal === 1 ? '是' : '否'
        })
      }).catch(err => {
        console.error(err)
      })
    },
    addOp() {
      this.editType = 'add'
      this.dgTitle = '新增Git凭证'
      this.dgVisible = true
      this.gitProviderInfo = {}
    },

    editOp(tblRow) {
      this.editType = 'edit'
      this.dgTitle = '编辑Git凭证'
      this.dgVisible = true
      this.gitProviderInfo = { ...tblRow }
      this.gitProviderInfo['isDefault'] = this.gitProviderInfo.isDefault + ''
      this.gitProviderInfo['isGlobal'] = this.gitProviderInfo.isGlobal + ''
    },

    deleteOp(tblRow) {
      const reqData = { ...tblRow }
      reqData['isDelete'] = true
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitEdit(reqData)
      })
    },

    cancelEdit() {
      this.dgVisible = false
    },

    submitEdit(editForm) {
      if (!editForm['isDelete']) {
        editForm['isDelete'] = false
      }
      updateGitProvider(editForm).then(res => {
        this.$message.success('操作成功')
        this.initTblData()
      }).catch(err => {
        console.error(err)
        this.$message.error('操作失败')
      })
      this.dgVisible = false
    }
  }
}
</script>

<style scoped>
#git-provider {
  margin: 30px;
}

#git-provider /deep/ .headerClass {
  text-align: center;
}

#git-provider /deep/ .cellClass {
  text-align: center;
  font-size: 14px;
}
</style>
